import React from 'react';
import {changeTime} from './tool'

//不传参 传参（调用）

class Demo extends React.Component{
    // constructor(){
    //   super();
    //   this.state = {title:'事件绑定'}  //当前状态  (声明状态)
    //   this.getData = this.getData.bind(this);//绑定this，拿到当前demo类 （事件绑定）
    // }

    state = {title:'事件绑定',list:[]}
    //获取数据的数据处理函数
    getData=()=>{
        //setState改变render生命周期，拿到更新，获取当前state状态，改变title
        this.setState({title:'获取数据'}) 
        console.log('getdata');
        console.log(this);
    }
    get = ()=>{
        //箭头函数直接绑定 (事件处理函数用箭头函数)
        //fetch() 提供啥啥啥 啥啥啥
        fetch('https://cnodejs.org/api/v1/topics')
            .then(res=>res.json())
            .then(res=>{
                console.log(res);
                this.setState({list:res.data}) 
            })
        console.log(this);
    }
    render(){
      return <div>
        <h2>{this.state.title}</h2>
        <button onClick={this.getData}>获取数据</button>
        <button onClick={this.get}>箭头函数绑定</button>
        {/* <ul>
            {[<li>1</li>,<li>2</li>]}
            {
                this.state.list.map(item=>{
                    return <li key={item.id}>
                        <img src={item.author.avatar_url}/>
                        <span>{item.replay_count}</span>
                        <span>{item.visit_count}</span>
                        {item.title}
                        <span>{changeTime(item.last_reply_at)}</span>
                    </li>
                })
            }
        </ul> */}
      </div>
    }
}

export default Demo;




// export default class Demo extends React.Component{
//     state = {title:'事件绑定',list:[]}
//     get = (e)=>{
//         console.log(e);
//     }
//     get2 =(id,e)=>{
//         console.log(id);
//         console.log(e);
//     }
//     render(){
//         return <div>
//             <h2>{this.state.title}</h2>
//             <button onClick={this.get}>获取数据</button>
//             {/* <button onClick={this.get}>箭头函数绑定</button> */}
//             {/*传参*/ }
//             <button onClick={(e)=>{this.get(100,e)}}>获取数据</button>
//             <ul className="list">
//                {
//                    this.state.list.map(item=>{
//                     return <li key ={item.id}>
//                         <img src = {item.author.avatar_url}/>
//                         <span>{item.reply_count}</span>
//                         <span>{item.visit_count}</span>
//                         {/* {item.title}
//                         <span>{changeTime(item.last_reply_at)}</span> */}
//                     </li>//key的作用，为了去复用，遍历要加上key属性
//                 })
//                 }   
           
//             </ul>
//         </div>
//     }
// }